<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="order-all"
  >
    <el-collapse v-if="orders != null && orders.length !== 0" v-model="activeName" accordion>
      <el-collapse-item v-for="(v, i) in orders" :key="i" :name="i">
        <template slot="title">
          <div class="test" style="display: flex">
            <div style="width: 168px">订单编号:
              <span style="color: #409EFF">{{v.oid}}</span>
            </div>
            <div style="width: 110px">订单总价:
              <span style="color: #409EFF">￥{{v.sumPrice}}</span>
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="getAllAddress(v.address)"
              placement="top-start"
            >
              <div style="width: 185px">订单地址:
                <span style="color: #409EFF;">{{getAddress(v.address)}}</span>
              </div>
            </el-tooltip>
            <div style="width: 105px">收货人姓名:
              <span style="color: #409EFF">{{v.name}}</span>
            </div>
            <div style="width: 150px">收货人电话:
              <span style="color: #409EFF">{{v.tel}}</span>
            </div>
            <div v-if="v.state === 1">
              <el-tag>已下单</el-tag>
              <template v-if="isFront">
                <el-button
                  style="margin-left: 10px"
                  @click.stop="applyRefund(v.id)"
                  type="danger"
                  size="small"
                  plain
                >申请退款</el-button>
              </template>
              <template v-else>
                <el-button
                  style="margin-left: 10px"
                  @click.stop="delivery(v.id)"
                  type="success"
                  size="small"
                  plain
                >点击发货</el-button>
              </template>
            </div>
            <div v-if="v.state === 2">
              <el-tag type="warning">已发货</el-tag>
              <template v-if="isFront">
                <el-button
                  style="margin-left: 10px"
                  @click.stop="confirmReceipt(v.id)"
                  type="warning"
                  size="small"
                  plain
                >确认收货</el-button>
              </template>
            </div>
            <div v-if="v.state === 3">
              <el-tag type="success">已完成</el-tag>
            </div>
            <div v-if="v.state === 4">
              <el-tag type="danger">已退款</el-tag>
            </div>
            <div v-if="v.state === 5">
              <el-tag type="info">退款中</el-tag>
              <template v-if="isFront">
                <el-button
                  style="margin-left: 10px"
                  @click.stop="cancelRefund(v.id)"
                  type="info"
                  size="small"
                  plain
                >取消申请</el-button>
              </template>
              <template v-else>
                <el-button
                  style="margin-left: 10px"
                  @click.stop="agreeRefund(v.id)"
                  type="danger"
                  size="small"
                  plain
                >同意退款</el-button>
              </template>
            </div>
          </div>
        </template>
        <template>
          <el-table :data="v.orderItems" height="400" border style="width: 100%">
            <el-table-column height="400" align="center" label="商品图片">
              <template slot-scope="scope">
                <img height="100" :src="baseUrl + scope.row.img">
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="商品描述"></el-table-column>
            <el-table-column align="center" prop="price" label="商品单价"></el-table-column>
            <el-table-column align="center" prop="num" label="商品数量"></el-table-column>
          </el-table>
        </template>
      </el-collapse-item>
    </el-collapse>
    <div class="null" v-else>您没有任何订单</div>
  </div>
</template>

<script>
import City from "../../public/city";

export default {
  name: "order",
  props: ["url", "isFront"],
  data() {
    return {
      orders: null,
      sizeList: null,
      loading: true,
      activeName: 0,
      frontUrl: "/order/front/updateState",
      afterUrl: "/order/after/updateState"
    };
  },
  created() {
    this.getOrders();
    if (this.isFront) {
      this.getShopCarts();
    }
  },
  methods: {
    getOrders() {
      this.loading = true;
      this.axios.get("/order" + this.url).then(res => {
        this.orders = res.data.data;
        this.sizeList = this.orders.map(v => v.orderItems.length);
        this.loading = false;
      });
    },
    getShopCarts() {
      this.axios.get("/shopCart/front/getAll").then(res => {
        this.$root.$data.cart = res.data.data;
      });
    },
    getAddress(address) {
      let city = new City();
      let pid = address.substring(0, 6);
      let cid = address.substring(6, 12);
      let cuid = address.substring(12, 18);
      return city.getAddress(pid, cid, cuid);
    },
    getAllAddress(address) {
      return this.getAddress(address) + address.substring(18);
    },
    updateState(id, state, url) {
      let params = {
        oid: id,
        state: state
      };
      this.$myPut(this, url, this.getOrders, params);
    },
    delivery(id) {
      this.updateState(id, 2, this.afterUrl);
    },
    agreeRefund(id) {
      this.updateState(id, 4, this.afterUrl);
    },
    cancelRefund(id) {
      this.updateState(id, 1, this.frontUrl);
    },
    confirmReceipt(id) {
      this.updateState(id, 3, this.frontUrl);
    },
    applyRefund(id) {
      this.updateState(id, 5, this.frontUrl);
    }
  }
};
</script>

<style scoped>
.test > * {
  font-size: 12px;
  margin-left: 13px;
}

.order-all {
  height: 78vh;
}

.null {
  font-size: 37px;
  text-align: center;
  padding: 100px 0;
  color: #888;
}
</style>